<template>
	<el-form-item label="用户名">
		<el-select v-model="suib" @clear="weikong" filterable remote reserve-keyword :clearable="weikong"
			placeholder="请输入上级代理人昵称" :remote-method="remoteMethod" :loading="loading" style="width: 240px">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
		</el-select>
	</el-form-item>
</template>

<script lang="ts">
// import { apiUserList } from '/@/api/MemberManagement/MemberList';
import { apiUserList } from '/@/api/financialmanagement/financialmanagementlevel';
import {defineComponent,ref } from 'vue';
const props = {
    titleptname:{
        type:String,
        default:''
    }
};
interface ListItem {
	value: string;
	label: string;
}
export default defineComponent({
  name: 'pagination',
  props: props,
  setup(props,{emit}){
	const suib = ref();
    const options = ref<ListItem[]>([]);
            const values = ref<string[]>([])
		const loading = ref(false);
		const remoteMethod = (query: string) => {
			if (query) {
				apiroleLista(query);
			} else {
				options.value = [];
			}
            emit('customEvent',values);
          
		};
			// 第一步：刷新页面清空
			const hello = () => {
			console.log("@@")
			suib.value = '';
		}
		//点击X为空时
		const weikong = () => {
			suib.value = '';
			emit('customEvent', suib);
		};
		// 搜索
		const apiroleLista = (name: String) => {
			var username = { username: name };
			apiUserList(username).then((res) => {
				const list = res.data.userList ?? [];
				list.value = list.map((item: { uuid: any; username: any; }) => {
					return { value: `${item.uuid}`, label: `会员昵称:${item.username}` };
				});
				loading.value = true;
				setTimeout(() => {
					loading.value = false;
					options.value = list.value.filter((item: any) => {
						return item;
					});
				}, 200);

			});
		};
   
    return {
		hello,
		weikong,
        suib,
        values,
        loading,
        remoteMethod,
        options,
        apiroleLista,
    }
  }
});
</script>